<template>
  <div>
    <el-dialog title="详情信息" :visible.sync="dialogVisible" width="800px">
      <div style="position: relative" v-loading="loading">
        <div style="display: flex; justify-content: flex-end; width: 100%">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="type = 'show'"
            v-if="type == 'edit'"
          >
            <i class="el-icon-edit"></i> 取消编辑</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="type = 'edit'"
            v-else
          >
            <i class="el-icon-edit"></i> 修改信息</el-button
          >
        </div>
        <el-form label-width="150px" size="mini">
          <el-form-item label="认证状态">
            <div style="display: flex">
              <span>
                <el-tag type="info" v-if="detail.authStatus == '0'"
                  >未提交审核资料</el-tag
                >
                <el-tag v-if="detail.authStatus == '1'">待审核</el-tag>
                <el-tag type="success" size="mini" v-if="detail.authStatus == '2'"
                  >审核通过</el-tag
                >
                <el-tag type="danger" size="mini" v-if="detail.authStatus == '3'"
                  >审核驳回</el-tag
                >
              </span>
              <div style="margin-left:20px;" v-if="detail.authStatus == '1'">
                <el-button type="success" class="el-icon-circle-check" @click="changeAuthStatus('2')">通过</el-button>
                <el-button type="danger" class="el-icon-circle-close" @click="changeAuthStatus('3')">驳回</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input
              style="width: 200px"
              v-model="detail.name"
              v-if="type == 'edit'"
            ></el-input>
            <span v-else>{{ detail.name || "" }}</span>
          </el-form-item>
          <el-form-item label="身份证照片">
            <el-image
              :preview-src-list="detail.previewImgs"
              style="width: 100px"
              :src="detail.headIdUrl | imgPreFilter"
              :fit="'fit'"
            ></el-image>
          </el-form-item>
          <el-form-item label="身份证号码">
            <el-input
              style="width: 200px"
              v-model="detail.userCard"
              v-if="type == 'edit'"
            ></el-input>
            <span v-else>{{ detail.userCard || "" }}</span>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input
              style="width: 200px"
              v-model="detail.mobile"
              v-if="type == 'edit'"
            ></el-input>
            <span v-else>{{ detail.mobile || "" }}</span>
          </el-form-item>

          <el-form-item label="性别">
            <el-select
              style="width: 200px"
              v-model="detail.sex"
              placeholder="请选择"
              v-if="type == 'edit'"
            >
              <el-option key="1" label="男" value="1"> </el-option>
              <el-option key="2" label="女" value="2"> </el-option>
            </el-select>
            <div v-else>
              <span v-if="detail.sex == '1'">男</span>
              <span v-if="detail.sex == '2'">女</span>
            </div>
          </el-form-item>
          <el-form-item v-show="type == 'edit'">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="savePersonInfo"
              v-if="type == 'edit'"
            >
              <i class="el-icon-edit"></i> 保存信息</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { save_user_info_api,check_auth_api } from "@/api/auth";
export default {
  props: ["userDetail"],
  data() {
    return {
      dialogVisible: false,
      loading: false,
      detail: {},
      type: "show", // edit show
      form: {
        name: "",
      },
    };
  },
  methods: {
    changeAuthStatus(status){
      this.detail.authStatus = status;
      let ispass = '';
      if(status == '2'){
        ispass = 'Y'
      }
      if(status == '3'){
        ispass = 'N'
      }
        check_auth_api(ispass,this.detail.userId).then((res) => {
        this.type = "row";
        this.$message.success("操作成功");
      });
    },
    savePersonInfo() {
      save_user_info_api({
        ...this.detail,
      }).then((res) => {
        this.type = "row";
        this.$message.success("修改用户信息成功");
      });
    },
    show() {
      this.dialogVisible = !this.dialogVisible;
      if (this.dialogVisible) {
        this.loading = true;
        this.detail = {};
        setTimeout(() => {
          this.loading = false;
          this.detail = this.userDetail;

          this.detail.previewImgs = [
            this.$options.filters["imgPreFilter"](this.detail.headIdUrl),
          ];
        }, 1000);
      }
    },
  },
  mounted() {},
};
</script>

<style>
</style>